import { UdPageHeader, http } from "@/lib";
import apis from '@/apis/CustomerManage';
import { Table } from "antd";
import React from "react";
import './index.scss';

export default class DetailsAreaAndProduts extends React.Component<any> {


    state = {
        page: 1,
        size: 20,
        agentCode: undefined,
        agentName: undefined,
        tableData: [],
        totalPages: 1,
        total: 0,
        addressOptions: [],
        productOptions: []
    }


    componentDidMount() {
        const { agentName = undefined } = this.props.match.params
        this.setState({ agentName })
        this.getList()
    }

    //跟新表格数据
    getList = () => {
        const { agentId = undefined } = this.props.match.params
        const { page, size } = this.state
        http.get(apis.getAreaAndProduct, { params: { page, size, agentId } }).then(res => {
            const { totalElements, size, number, totalPages, content } = res?.data?.dealerSalesDomainAndProductRespDTOSpringPageVO || { totalElements: 0, size: 10, number: 1, totalPages: 1, content: [] }
            this.setState({
                size,
                totalPages,
                page: number,
                tableData: content,
                total: totalElements,
                agentCode: res.data?.agentCode,
            })
        })
    }

    //分页
    handleChangePage = (page, size) => {
        this.setState({ page, size }, () => {
            this.getList()
        })
    }

    render() {
        const { agentName, agentCode, tableData, total, page, size } = this.state
        return <div className="area-products-add">
            <UdPageHeader title="维护销售区域与产品" onBack={true} />
            <div className="informations">
                <p>
                    <span>客户编码：</span>
                    <span>{agentCode}</span>
                </p>
                <p>
                    <span>客户名称：</span>
                    <span>{agentName}</span>
                </p>
            </div>
            <Table
                dataSource={tableData}
                columns={[
                    {
                        title: "序号",
                        dataIndex: "no",
                        render: (text, record, index: number) => index + 1
                    },
                    {
                        title: "销售区域",
                        dataIndex: "",
                        render: (text, record: any, index) => {
                            let { provinceName, cityName, districtName } = record
                            provinceName = provinceName ? provinceName + "/" : ""
                            cityName = cityName ? cityName + "/" : ""
                            districtName = districtName ? districtName : ""
                            return provinceName + cityName + districtName
                        }
                    },
                    {
                        title: "物料代码",
                        dataIndex: "sapMatCode"
                    },
                    {
                        title: "物料描述",
                        dataIndex: "sapMatDescribe"
                    }
                ]}
                pagination={{
                    total,
                    current: page,
                    pageSize: size,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    pageSizeOptions: ["20", "40", "80", "100"],
                    showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
                    onChange: (page, pageSize) => { this.handleChangePage(page, pageSize) },
                    onShowSizeChange: (current, size) => { this.handleChangePage(current, size) }
                }}
            />
        </div>
    }
}